<template>
	<div class="list-wrap" @click="toMovie($event)">
		<div class="list">
			<div class="poster">
				<img :src="_repic(movie.img)">
			</div>
			<div class="info">
				<div class="content">
					<div class="movie-title">
						<p class="name">{{movie.nm}}</p>
					</div>
					<div class="detail">
						<p class="score" v-show="!movie.preShow && movie.sc!=0">观众评 <span class="num">{{movie.sc}}</span></p>
						<p class="score" v-show="!movie.preShow && movie.sc==0">暂无评分</p>
						<p class="score" v-show="movie.preShow"><span class="num">{{movie.wish}}</span> 人想看</p>
						<p class="actor">主演: {{movie.star}}</p>
						<p class="show-info">{{movie.showInfo}}</p>
					</div>
				</div>
				<div class="btn" v-show="!movie.preShow">购票</div>
				<div class="btn" v-show="movie.preShow" :style="btnStyle">预售</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['movie'],
		data(){
			return {
				btnStyle: {
					background: "#3c9fe6"
				}
			}
		},
		methods:{
			_repic(img){
				return img.replace(/w.h/,'64.90');
			},
			toMovie(event){
				var movieId = event.currentTarget.getAttribute('data-id');
				this.$router.push({
					path:'/movie/'+movieId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-wrap{
	width: 100%;
	padding: 0 15px;
	overflow: hidden;
	.poster{
		width: 64px;
		height: 90px;
		margin-top: 12px;
		margin-right: 10px;
		float: left;
		background-color: #E5E5E5;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.info{
		width: calc(100% - 79px);
		padding: 12px 14px 12px 0;
		border-bottom: 1px solid #e6e6e6;
		position: relative;
		float: left;
		.content{
			margin-right: 47px;
			padding-right: 5px;
			p{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.movie-title{
				font-size: 17px;
				color: #333;
				font-weight: 700;
				margin-bottom: 7px;
			}
			.detail{
				font-size: 13px;
				color: #666;
				.score{
					.num{
						font-size: 15px;
						color: #faaf00;
					}
				}
				.actor{
					margin-top: 6px;
				}
				.show-info{
					margin-top: 6px;
				}
			}
		}
		.btn{
			position: absolute;
			top: 0;
			right: 14px;
			bottom: 0;
			margin: auto;
			width: 47px;
			height: 27px;
			text-align: center;
			line-height: 27px;
			font-size: 12px;
			color: #fff;
			background-color: #f03d37;
			border-radius: 4px;
		}
	}
}
</style>
